<template>  
    <el-carousel :interval="5000" arrow="always" class="my-carousel">  
      <el-carousel-item v-for="(image, index) in images" :key="index">  
        <img :src="image.src" :alt="image.alt" class="carousel-image">  
      </el-carousel-item>  
    </el-carousel>  
  </template>  
    
  <script lang="ts" setup>  
  import { ref } from 'vue';  
  const images = ref([  
    { src: '/images/lb01.jpg', alt: 'Image 1' },  
    { src: '/images/lb02.jpg', alt: 'Image 2' },  
    { src: '/images/lb03.jpg', alt: 'Image 3' }  
  ]);  
  </script>  
    
  <style scoped>  
  .my-carousel {    
    width: 600px;    
    height: 300px;    
    overflow: hidden; /* 确保图片不会溢出轮播图容器 */
    margin-left: 20px;  
  }  
    
  .carousel-image {  
    width: 100%;  
    height: 100%;  
    object-fit: cover; /* 图片覆盖整个容器，同时保持宽高比 */  
    display: block; /* 移除图片底部的间隙 */  
  }  
  </style>